<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>

    <script>
        //本地存储
        //特性:
        //1.数据存储在用户浏览器中
        //2.设置读取方便,甚至页面刷新不丢失数据
        //3.容量较大,sessionStorage约5M localStorage约20M
        //4.只能存储字符串,可以将对象JSON.stringify()编码后存储

        //window.sessionStorage
        //1.生命周期为:关闭浏览器窗口
        //2.在同一个窗口(页面)下数据可以共享
        //3.以键值对的形式存储使用
        //存储数据:sessionStorage.setltem('key', value)
        //获取数据:sessionStorage.getItem('key')
        //删除数据:sessionStorage.removeltem('key')
        //删除所有数据:sessionStorage.clear()

        var ipt = document.querySelector('input')
        var set = document.querySelector('.set')
        var get = document.querySelector('.get')
        var rem = document.querySelector('.remove')

        set.addEventListener('click',function(){
            var val = ipt.value
            sessionStorage.setItem('uname',val)
        })
        get.addEventListener('click',function(){
            console.log(sessionStorage.getItem('uname'));
        })
        rem.addEventListener('click',function(){
            sessionStorage.removeItem('uname')
        })

        //window.localStorage
        //1.生命周期永久生效,除非手动删除,否则关闭页面也会存在
        //2.可以多窗口(页面)共享(同一浏览器可以共享)
        //存储数据:localStorage.setltem('key', value)
        //获取数据:localStorage.getltem('key')
        //删除数据:localStorage.removeltem('key')
    </script>
</body>
</html>